<template>
  <div class="search">
    <div class="field">
      <a class="cancel" @click="goBack">取消</a>
      <div class="input clearfix">
        <input v-model="query"/>
      </div>
    </div>
    <h3>热门搜索</h3>
    <div class="searchItem">
      <a v-for="hot in hotSearch" @click="search(hot.id)">{{hot.name}}</a>
    </div>
  </div>
</template>

<script>
export default {
      data:function () {
          return {
              query: '',
              hotSearch: [
                  {name: '金刚狼3', id: '25765735'},
                  {name: '一条狗的使命', id: '6873143'},
                  {name: '生化危机:终章', id: '20471852'},
                  {name: '乐高蝙蝠侠', id: '26145033'},
                  {name: '爱乐之城', id: '25934014'},
                  {name: '欢乐好声音', id: '26354572'}
              ]
          }
      },
   computed: {
   },

  methods: {
        search: function (id) {
            console.log('search for ' + id)
        },
      goBack: function () {
          this.$router.go(-1)
      }
  }
}
</script>

<style lang="scss" scoped>
  .search{
    padding: 10px 10px;

    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #E5E9F2;

    .field{
    line-height: 40px;
    text-align: center;


    .cancel{
      float:right;
      width: 30px;
    }

    .input{
      margin-right: 40px;

      input {
        width: 100%;
        height: 30px;

        text-align: center;

        border: none;
        border-radius: 40px;
      }
    }
  }

    h3{
      font-size: 16px;
      margin: 10px 0;
    }

    .searchItem{
      line-height: 3em;

      a {
        display: inline-block;
        padding: 0 10px;
        background-color: #fff;
        line-height: 2em;
        border: none;
        border-radius: 10px;
        margin-right: 10px;

        text-decoration: none;

        color: #e54847;
      }
    }
  }
</style>
